<!DOCTYPE html>
<html lang="zh_CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('字典-小邑')" />
    <style>
        #dictTable + .layui-table-view .layui-table-tool-temp {
            padding-right: 0 !important;
        }

        #dictTable + .layui-table-view .layui-table-body tbody > tr td {
            cursor: pointer !important;
        }

        #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
            background-color: #fff3e0 !important;
        }

        #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
            position: absolute!important;
            right: 6px!important;
            content: "\e602" !important;
            font-size: 12px!important;
            font-style: normal!important;
            font-family: layui-icon !important;
            -webkit-font-smoothing: antialiased!important;
            -moz-osx-font-smoothing: grayscale!important;
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" id="dictForm">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">字典名称</label>
                                    <div class="layui-input-inline">
                                        <input id="dictName" name="dictName" class="layui-input" autocomplete="off"
                                               type="text" placeholder="请输入字典名称或拼音"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" id="searchBtn_dict"
                                            class="xy-btn xy-btn-primary icon-btn xy-btn-md">
                                        <i class="layui-icon">&#xe615;</i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="dictTable" lay-filter="dictTable"></table>

                    <!-- 表格操作工具栏 -->
                    <script type="text/html" id="toolBar_dict">
                        <button sec:authorize="hasPermission('/dict/addDict','dict:addDict')" type="button" class="xy-btn xy-btn-primary xy-btn-md" lay-event="add_dict">
                                <i class="layui-icon">&#xe654;</i>新增
                            </button>
                            <button sec:authorize="hasPermission('/dict/editDict','dict:editDict')" type="button" class="xy-btn xy-btn-primary xy-btn-md" lay-event="update_dict">
                                <i class="layui-icon">&#xe642;</i>修改
                            </button>
                            <button sec:authorize="hasPermission('/dict/delete','dict:delete')"   type="button" class="xy-btn xy-btn-md xy-btn-danger" lay-event="delete_dict">
                                <i class="layui-icon">&#xe640;</i>删除
                            </button>
                    </script>
                    <!--单元格-->
                    <script type="text/html" id="dict-type-enable">
                        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-type-enable" {{d.isDelete=='0'?'checked':'' }}>
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" id="dictDataForm">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">标签</label>
                                    <div class="layui-input-inline">
                                        <input id="dictDataName" name="dictDataName" class="layui-input" autocomplete="off"
                                               type="text" placeholder="请输入标签或拼音"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" id="searchBtn_dictData"
                                            class="xy-btn xy-btn-primary icon-btn xy-btn-md">
                                        <i class="layui-icon">&#xe615;</i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="dictDataTable" lay-filter="dictDataTable"></table>

                    <!-- 表格操作工具栏 -->
                    <script type="text/html" id="toolBar_dictData">
                            <button sec:authorize="hasPermission('/dictData/addDictData','dictData:addDictData')" type="button" class="xy-btn xy-btn-primary xy-btn-md" lay-event="add_dictData">
                                <i class="layui-icon">&#xe654;</i> 新增
                            </button>
                            <button sec:authorize="hasPermission('/dictData/deleteBatch','dictData:deleteBatch')" type="button" class="xy-btn xy-btn-md xy-btn-danger" lay-event="delete_dictData">
                                <i class="layui-icon">&#xe640;</i> 删除
                            </button>
                    </script>

                    <!-- 数据行工具栏 -->
                    <script type="text/html" id="lineBar_dictData">
                        <a sec:authorize="hasPermission('/dictData/editDictData','dictData:editDictData')"  class="xy-btn xy-btn-xs" lay-event="edit_dictData">编辑</a>
                        <a sec:authorize="hasPermission('/dictData/delete','dictData:delete')"  class="xy-btn xy-btn-danger xy-btn-xs" lay-event="del_dictData">删除</a>
                    </script>

                    <!--单元格-->
                    <script type="text/html" id="dictData-type-enable">
                        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dictData-type-enable" {{d.isDelete=='0'?'checked':'' }}>
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var table_dict;
    var table_dictData;
    var selObj;
    layui.use(['table', 'layer', 'jquery', 'util', 'form', 'notice'], function () {
        var layer = layui.layer
            , table = layui.table
            , form  = layui.form
            , notice  = layui.notice
            , $ = layui.jquery
            , util = layui.util;
            util.fixbar({
                top: true //返回顶部
                , css: { right: 50, bottom: 50 }
                , bgcolor: '#3b7cd8'
                , click: function (type) {

                }
            });

        table_dict = table.render({
            elem: '#dictTable'
            ,method:'post'
            ,url: basePath + '/dict/list' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolBar_dict' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'numbers'}
                // ,{field: 'id',hide:true,title:'主键'}
                // ,{field: 'dictPyName', title: '拼音',hide:true,align:"center"}
                // ,{field: 'comments', title: '备注',hide:true,align:"center"}
                // ,{field: 'sortNumber', title: '排序',hide:true,align:"center"}
                ,{field: 'isDelete', title: '状态',templet: '#dict-type-enable',align:"center"}
                // ,{field: 'createTime', title: '创建时间',hide:true,align:"center"}
                // ,{field: 'updateTime', title: '修改时间',hide:true,align:"center"}
                ,{field: 'dictCode', title: '字典编号',align:"center"}
                ,{field: 'dictName', title: '字典名称',align:"center"}
            ] ]
            ,height: 'full-183'
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme:"#1E9FFF"
            },
            done: function (res, curr, count) {
                $('#dictTable+.layui-table-view .layui-table-body tbody>tr:first').trigger('click');
            }
        });
        form.on('switch(dict-type-enable)', function(obj) {
           sendAjaxPostToError(
               basePath + '/dict/updateDict',
               {
                   id:selObj.data.id,
                   isDelete:this.checked == true?0:1
               },
               function (result){
                   if (result.success == true){
                       top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                       table_dict.reload();
                   }else {
                       top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                   }
               },
               function (data) {
                   if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                       top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                   }else{
                       top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                   }
               }
           )
        });
        // 监听头工具栏事件
        table.on('toolbar(dictTable)', function(obj) {
            if (obj.event === 'add_dict' || obj.event === 'update_dict') {
                var url = basePath+ '/view/system/dict/dict_add_update';
                if (obj.event === 'update_dict'){
                    if (selObj.data.length === 0) {
                        top.layui.notice.msg('未选择数据~' ,{icon:3,position:"topCenter"});
                    }
                    url+= "?id="+selObj.data.id+"&type=2";
                }else {
                    url+="?type=1";
                }
                // 新增数据
                layer.open({
                    type: 2,
                    id:"add_dictData",
                    skin: 'layer-ext-myskin',
                    title:obj.event === 'update_dict'?"修改字典":"添加字典",
                    shadeClose: false,
                    shade: 0.3,
                    area: ["60%","47.8%"],
                    content: url
                });
            }
            else if(obj.event === 'delete_dict') {
                // 批量删除
                if (selObj.data.length === 0) {
                    top.layui.notice.msg("未选择数据~" ,{icon: 3,position:"topCenter"});
                } else {
                    layer.confirm('确定要删除选中数据吗？',{icon:5, title:'提示',skin: 'layer-ext-myskin'}, function(index) {
                        layer.close(index);
                        // 异步请求
                        $.ajax({
                            type: 'post',
                            url: basePath+ '/dict/delete',
                            data: {id: selObj.data.id},
                            dataType: 'json',
                            success:function (res) {
                                if (res.success){
                                    top.layui.notice.msg(res.msg ,{icon:1,position:"topCenter"});
                                    table.reload('dictTable',{});
                                }else {
                                    top.layui.notice.msg(res.msg ,{icon: 2,position:"topCenter"});
                                }
                            },
                            error: function(){
                                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                            }
                        });
                    });
                }
            }
        })

        // 搜索
        $('#searchBtn_dict').on('click',function () {
            table_dict.reload({
                where: getFormData('dictForm')
            });
        });

        /* 监听行单击事件 */
        table.on('row(dictTable)', function (obj) {
            selObj = obj;
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            table_dictData.reload({
                where: {dictId: obj.data.id},
                url: basePath + '/dictData/list' //数据接口
            });
        });

        table_dictData = table.render({
            elem: '#dictDataTable'
            ,method:'post'
            ,data:[]
            ,page: true //开启分页
            ,toolbar: '#toolBar_dictData' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'checkbox'}
                // ,{field: 'id',hide:true,title:'主键',align:"center"}
                // ,{field: 'dictId', title: '字典ID',hide:true,align:"center"}
                ,{field: 'dictDataName', title: '标签',align:"center"}
                ,{field: 'dictDataCode', title: '对应值',align:"center"}
                // ,{field: 'dictDataPyName', title: '拼音',hide:true,align:"center"}
                ,{field: 'comments', title: '备注',align:"center"}
                ,{field: 'sortNumber', title: '排序',align:"center"}
                ,{field: 'isDelete', title: '状态',templet: '#dictData-type-enable',align:"center"}
                // ,{field: 'createTime', title: '创建时间',hide:true,align:"center"}
                // ,{field: 'updateTime', title: '修改时间',hide:true,align:"center"}
                ,{fixed: 'right',width: 150, align:'center', toolbar: '#lineBar_dictData',title:'操作'}
            ] ]
            ,height: 'full-183'
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                ,curr: 1 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme:"#1E9FFF"
            }
        });
        form.on('switch(dictData-type-enable)', function(obj) {
            sendAjaxPostToError(
                basePath + '/dictData/updateDictData',
                {
                    id:this.value,
                    isDelete:this.checked == true?0:1
                },
                function (result){
                    if (result.success == true){
                        top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                        table_dict.reload();
                    }else {
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                }
            )
        });
        // 监听头工具栏事件
        table.on('toolbar(dictDataTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据

            if (obj.event === 'add_dictData' ) {
                var url = basePath+ '/view/system/dict/dictData_add_update?dictId='+selObj.data.id+"&type=1";
                // 新增数据
                layer.open({
                    type: 2,
                    id:"add_dictData",
                    skin: 'layer-ext-myskin',
                    title:"添加字典详情",
                    shadeClose: false,
                    shade: 0.3,
                    area: ["60%","47.8%"],
                    content: url
                });
            } else if(obj.event === 'delete_dictData') {
                // 批量删除
                if (checkStatus.data.length === 0) {
                    top.layui.notice.msg("未选择数据~" ,{icon: 3,position:"topCenter"});
                } else {
                    layer.confirm('确定要删除选中数据吗？',{icon:5, title:'提示',skin: 'layer-ext-myskin'}, function(index) {
                        var ids = [];
                        $.each(data, function(index,element) {
                            ids.push(element.id);
                        });
                        layer.close(index);
                        // 异步请求
                        $.ajax({
                            type: 'post',
                            url: basePath+ '/dictData/deleteBatch',
                            data: {ids: ids},
                            dataType: 'json',
                            success:function (res) {
                                if (res.success){
                                    top.layui.notice.msg(res.msg ,{icon:1,position:"topCenter"});
                                    table.reload('dictDataTable',{});
                                }else {
                                    top.layui.notice.msg(res.msg ,{icon: 2,position:"topCenter"});
                                }
                            }
                        });
                    });
                }
            }
        });

        //监听行工具事件
        table.on('tool(dictDataTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'del_dictData') {
                // 单记录删除
                layer.confirm('确定要删除吗？', {icon:5, title:'提示',skin: 'layer-ext-myskin'},function(index) {
                    layer.close(index);
                    $.ajax({
                        type: 'post',
                        url: basePath+ '/dictData/delete',
                        data: {
                            id : data.id
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.success){
                                top.layui.notice.msg(res.msg ,{icon:1,position:"topCenter"});
                                table.reload('dictDataTable',{});
                            }else {
                                top.layui.notice.msg(res.msg ,{icon: 2,position:"topCenter"});
                            }
                        }
                    });
                });
            } else if(layEvent === 'edit_dictData') {
                // 修改
                var url = basePath+ '/view/system/dict/dictData_add_update?dictId='+selObj.data.id+"&type=2&id="+obj.data.id;
                // 新增数据
                layer.open({
                    type: 2,
                    id:"add_dictData",
                    skin: 'layer-ext-myskin',
                    title:"修改字典详情",
                    shadeClose: false,
                    shade: 0.3,
                    area: ["60%","47.8%"],
                    content: url
                });
            }
        });

        // 搜索
        $('#searchBtn_dictData').on('click',function () {
            table_dictData.reload({
                where: getFormData('dictDataForm')
            });
        });


    });
</script>
</body>
